<template>
  <div class="play-pagehead" >
    <div class="mask" :style="{background:`url('${playsong.song ? playsong.picUrl : playsong.al? playsong.al.picUrl:playsong.artists.img1v1Url}')`}" >

    </div>
   <PlayPageHead @playpage="$emit('playpage')" :playsong="playsong" />
    
    <PlayPageDisc v-if="showDisc"  @click.native="showDisc=false" :playsong="playsong" :played="played"/>
    <PlayPageLyric v-else  :playsong="playsong"  :durationchange="durationchange"/>
    <PlayPageFoot :duration="duration" :durationchange="durationchange"
     @updata:currenTime="$emit('updata:currenTime',$event)"
     :played="played"
     @playing="$emit('playing')"
      @paused='$emit("paused")'
      @Show-List="$emit('Show-List')"
      @pre-song="$emit('pre-song')"
      @next-song="$emit('next-song')"
    />
    
  </div>
</template>

<script>
import PlayPageHead from "@/components/PlayPageHead.vue";
import PlayPageDisc from "@/components/PlayPageDisc.vue";
import PlayPageFoot from "@/components/PlayPageFoot.vue";
import PlayPageLyric from "@/components/PlayPageLyric.vue";
export default {
    components: {
    
    PlayPageHead,
    PlayPageDisc,
    PlayPageFoot,
    PlayPageLyric
   
  
   
  },
  props:{
    playsong:Object,
    duration:Number,
    durationchange:Number,
    played:Boolean
  },
  data:function(){
    return {
      showDisc:true
    }
  }
}
</script>

<style lang="less" scoped>
.play-pagehead{
    padding: 10px;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    right: 0;
   background: black;
    z-index: 9;
    display: flex;
    flex-direction: column;
    
  .mask{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: black;
    background-position: center center;
    background-size: cover;
    filter: blur(30px) brightness(.8);
    transform: scale(1.5);
  }

   

    
}

</style>